<template>
	<view class="login">
		<transition-group type="out-in" :duration="{enter:3000,leave:500}"
			enter-active-class="animate__animated animate__fadeInRightBig"
			leave-active-class="animate__animated animate__fadeOutLeftBig">
			<view class="login__body" v-if="status=='shouji'">
				<image :src="user.avatar" class="avatar" mode="aspectFit" />
				<button class="primary">
					<image src="../../static/imgs/微信.svg" class="svgimgs" mode="aspectFit"></image>
					<text>微信一键登录</text>
				</button>
				<view class="http">
					<text class="bg1">登录即同意</text>
					<text class="bg2">《用户协议》</text>
					<text class="bg1">和</text>
					<text class="bg2">《隐私政策》</text>
				</view>
			</view>
			<view class="login__body" v-if="status=='weixin'">
				<view class="header">
					<image src="../../static/imgs/手机.svg" class="avatar" mode="aspectFit" />
					<text class="phone">{{user.phone}}</text>
					<text class="desc">服务由联通统一认证提供</text>
				</view>
				<button class="primary primary2">
					<text>绑定该手机号</text>
				</button>
				<view class="http">
					<radio checked="true"></radio>
					<view class="right">
						<text class="bg1">登录即同意</text>
						<text class="bg2">联通统一认证服务条款</text>
						<text class="bg1">和</text>
						<text class="bg2">找到用户协议</text>
						<text class="bg2">隐私协议</text>
						<text class="bg1">并使用本机号码登录</text>
					</view>
				</view>
			</view>
		</transition-group>
		<view class="login__footer">
			<text class="login__footer--line">其他登录方式</text>
			<transition-group type="in-out" :duration="{enter:1000,leave:500}"
				enter-active-class="animate__animated animate__fadeInRightBig"
				leave-active-class="animate__animated animate__fadeOutLeftBig">
				<view class="mode" v-if="status=='shouji'" @tap="status='weixin'">
					<image src="../../static/imgs/手机2.svg" class="svgimgs" mode="aspectFit"></image>
					<text>手机授权</text>
				</view>
				<view class="mode" v-if="status=='weixin'" @tap="status='shouji'">
					<image src="../../static/imgs/微信.svg" class="svgimgs" mode="aspectFit"></image>
					<text>微信登录</text>
				</view>
			</transition-group>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';

	const status = ref("weixin")
	// 微信
	// 手机号
	const user = reactive({
		phone:"18798565757",
		code:"",
		avatar:"../../static/logo.png",// 图片
	})
	
	
</script>

<style lang="scss" scoped>
	.login {
		background-color: white;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 100%;

		&__body {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 20upx;
			margin-top: -300upx;

			.avatar {
				margin-bottom: 140upx;
			}
		}

		&__footer {
			position: absolute;
			bottom: 0;
			left: 0;
			height: 180upx;
			width: 100%;
			// background-color: red;
			display: flex;
			flex-direction: column;
			align-items: center;
			// justify-content: center;

			&--line {
				font-size: 16upx;
				position: relative;

				&::before,
				&::after {
					content: "";
					position: absolute;
					top: 50%;
					width: 230upx;
					height: 2upx;
					background-color: #ccc;
				}

				&::after {
					left: -30upx;
					transform: translateX(-100%);
				}

				&::before {
					right: -30upx;
					transform: translateX(100%);
				}
			}
		}
	}

	.primary {
		background: #35a70f;
		color: white;
		font-size: 30upx;
		border-radius: 200upx;
		width: 600upx;
		height: 80upx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10upx;

		.iconfont {
			color: white;
			font-size: 40upx;
		}
	}

	.avatar {
		width: 120upx;
		height: 120upx;
		border-radius: 10upx;
	}

	.bg1 {
		color: #ccc;
		font-size: 20upx;
	}

	.bg2 {
		color: #3857ff;
		font-size: 20upx;
	}

	.svgimgs {
		width: 80upx;
		height: 80upx;
	}

	.mode {
		display: flex;
		margin-top: 20upx;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 5upx;
		font-size: 18upx;

		.svgimgs {
			width: 60upx;
			height: 60upx;
		}
	}

	.http {
		width: 600upx;
		white-space: break-spaces;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;

		>.right {
			float: left;
			display: flex;
			flex-wrap: wrap;
			flex: 1;
		}
	}

	:deep(.uni-radio-input) {
		width: 30upx;
		height: 30upx;
	}

	.header {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 20upx;
		margin-bottom: 100upx;

		.phone {
			font-size: 50upx;
		}

		.avatar {
			margin: 0;
		}

		.desc {
			font-size: 20upx;
		}
	}

	.primary2 {
		background-color: #3857ff;
	}
</style>